<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设置</title>
  <style>
    * {
      font-size: 14px;
    }

    .fieldset {
      margin-top: 10px;
    }

    .input {
      margin-top: 10px;
    }

    .priority-input {
      width: 30px;
    }

    .btn-box {
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div>
    <form id="setting" name="setting" action="">
      <div class="import-file">
        <fieldset class="fieldset">
          <legend>自定义词表Excel导入模式</legend>
          <label>
            <input class="input" type="radio" name="importFile" value="add">追加
          </label>
          <label>
            <input class="input" type="radio" name="importFile" value="replace">覆盖
          </label>
        </fieldset>
        <fieldset class="fieldset">
          <legend>生成拼音</legend>
          <label>
            <input class="input" type="radio" name="generatePinyin" value="onlyTxt" checked>纯拼音txt
          </label>
          <br>
          <label>
            <input class="input" type="radio" name="generatePinyin" value="ChineseTxt">带汉字的txt
          </label>
          <br>
          <label>
            <input class="input" type="radio" name="generatePinyin" value="ChineseExcelSingle">带汉字的excel表格-单文件多表
          </label>
          <br>
          <label>
            <input class="input" type="radio" name="generatePinyin" value="ChineseExcelMany">带汉字的excel表格-多文件单表
          </label>
          <br>
          <label>
            <input class="input" type="radio" name="generatePinyin" value="ChineseWord">带汉字的word文档
          </label>
          <div style="margin-left: 20px;display: none;" class="input-scendary">
            <label>
              <input class="input" type="radio" name="wordRed" value="ChineseWordIgnorePolyphonicPinyin" checked>不标记多音
            </label>
            <label>
              <input class="input" type="radio" name="wordRed" value="ChineseWordMarkPolyphonicPinyin">标记多音
            </label>
          </div>
        </fieldset>
        <fieldset class="fieldset" style="position: relative;">
          <legend>词典</legend>
          <label>
            <input class="input" style="margin-top: 14px;" type="checkbox" name="dictionary" value="custom">自定义excel词表
          </label>
          <br>
          <label>
            <input class="input" style="margin-top: 14px;" type="checkbox" name="dictionary" value="baidu">百度汉语词典
          </label>
          <br>
          <label>
            <input class="input" style="margin-top: 14px;" type="checkbox" name="dictionary" value="persons">书籍人名词典
          </label>
          <br>
          <label>
            <input class="input" style="margin-top: 14px;" type="checkbox" name="dictionary"
              value="complete">现代汉语词典（完整版）
          </label>
          <br>
          <label>
            <input class="input" style="margin-top: 14px;" type="checkbox" name="dictionary" value="modern">现代汉语词典
          </label>
          <br>
          <br>
          <div style="position: absolute;top: 0;right: 10px;display: flex;flex-direction: column;align-items: center;"
            title="两位数，数字越大优先级越高">
            <span>优先级</span>
            <input class="priority-input" style="margin-top: 6px;" type="number" name="priority" maxlength="2"
              value="99">
            <input class="priority-input" style="margin-top: 6px;" type="number" name="priority" maxlength="2"
              value="89">
            <input class="priority-input" style="margin-top: 6px;" type="number" name="priority" maxlength="2"
              value="79">
            <input class="priority-input" style="margin-top: 6px;" type="number" name="priority" maxlength="2"
              value="69">
            <input class="priority-input" style="margin-top: 6px;" type="number" name="priority" maxlength="2"
              value="59">
          </div>
          (重启后生效)
        </fieldset>
      </div>
    </form>
    <div class="btn-box">
      <button class="save-btn;" style="float:right;width: 80px;" onclick='handleSubmit()'>保存</button>
      <button style="float: left;" onclick="handleClear()">清除数据</button>
    </div>
  </div>
  <script>
    const { ipcRenderer } = window.require('electron')

    const store = require("./js/store");
    let handleClear = () => {
      if (!confirm("您确定要还原设置吗？")) return
      store.clear();
      store.set("setting", {
        generateMode: "onlyTxt",
        importMode: "add",
        dicts: [
          { name: "custom", isUsing: true, priority: 99 },
          { name: "baidu", isUsing: true, priority: 89 },
          { name: "persons", isUsing: false, priority: 79 },
          { name: "complete", isUsing: false, priority: 69 },
          { name: "modern", isUsing: false, priority: 59 },
        ],
      });
      updateView()
      alert("清除成功");
    };
    let saveBtn = document.querySelector(".save-btn")
    let form = document.querySelector("#setting")
    let inputScendary = document.querySelector(".input-scendary")
    let priorityList = form.elements['priority']
    let dictList = form.elements['dictionary']
    let obj = {}

    if (store.get("setting")) {
      updateView()
    }

    let handleSubmit = () => {
      if (form.elements['generatePinyin'].value == "ChineseWord") {
        obj.generateMode = form.elements['wordRed'].value
      } else {
        obj.generateMode = form.elements['generatePinyin'].value
      }
      obj.importMode = form.elements['importFile'].value
      let dicts = []

      dictList.forEach((item, index) => {
        if (item.checked) dicts.push({ name: item.value, isUsing: true, priority: priorityList[index].value })
        else dicts.push({ name: item.value, isUsing: false, priority: priorityList[index].value })
      })
      obj.dicts = dicts
      store.set("setting", obj)
      alert("保存成功")
      ipcRenderer.send("settingclose")
    }

    let generatePinyinRadios = document.querySelectorAll('input[name="generatePinyin"]')
    generatePinyinRadios.forEach(child => {
      child.addEventListener("change", _ => {
        console.log(child.value)
        if (child.value == "ChineseWord") {
          inputScendary.style.display = "block"
        } else {
          inputScendary.style.display = "none"
        }
      })
    })
    function updateView() {
      obj = Object.assign({}, store.get("setting"))
      console.log(obj)
      form.elements['importFile'].value = obj.importMode
      if (obj.generateMode.includes("ChineseWord")) {
        form.elements['generatePinyin'].value = "ChineseWord"
        form.elements['wordRed'].value = obj.generateMode
        inputScendary.style.display = "block"
      } else {
        form.elements['generatePinyin'].value = obj.generateMode
        inputScendary.style.display = "none"
      }
      dictList.forEach((item, index) => {
        let dict = obj.dicts.find(d => d.name == item.value)
        priorityList[index].value = dict.priority
        if (dict.isUsing) {
          item.checked = true
        } else {
          item.checked = false
        }
      })
      // form.elements['generatePinyin']
    }
    // saveBtn.addEventListener("click", _=>{
    //   alert("???")
    // })
  </script>
</body>

</html>